import React,{useContext} from 'react'
import classes from './Counter.module.css'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faMinus,faPlus} from '@fortawesome/free-solid-svg-icons'
import TestContext from '../../../../store/TestContext'
export default function Counter (props) {
    const testContext = useContext(TestContext)
    const addBtn = ()=>{
        testContext.add(props.meal)
    }
    const subBtn =()=>{
        testContext.sub(props.meal)
    }
  return (
    <div className={classes.Counter}>
      {props.meal.amount && props.meal.amount !== 0 ? (
        <>
          <button className={classes.Sub}>
          <FontAwesomeIcon icon={faMinus} onClick={subBtn}></FontAwesomeIcon>
          </button>
          <span className={classes.Count}>{props.meal?.amount}</span>
        </>
      ) : null}
      <button className={classes.Add} onClick={addBtn}>
       <FontAwesomeIcon icon={faPlus}></FontAwesomeIcon>
      </button>
    </div>
  )
}
